<style scoped>
    .search_views {
        margin-top: 10px;
    }

</style>

<template>
    <div>
        <Card>
            <div class="search_views clearfix">
                <router-link :to="'/ad/create_ad'">
                    <i-button type="primary" class="save_btn">
                        <Icon type="plus-round"></Icon>
                        添加广告
                    </i-button>
                </router-link>
                <div class="search_box">
                    <Form inline>
                        <FormItem>
                            <Input placeholder="请输入广告名称" v-model="ad_name" class="wid200" clearable/>
                        </FormItem>
                        <FormItem>
                            <Select v-model="ad_type" class="wid200" placeholder="请选择广告分类" clearable>
                                <Option v-for="item in ad_options" :value="item.id" :key="item.id">{{ item.ad_name }}
                                </Option>
                            </Select>
                        </FormItem>
                        <FormItem>
                            <Cascader class="wid300" placeholder="请选择所属地区" :data="regionData" change-on-select
                                      v-model="ad_region"></Cascader>
                        </FormItem>
                        <FormItem>
                            <Button type="primary" class="ser_btn" @click="getAdData">搜索</Button>
                        </FormItem>
                    </Form>
                </div>
            </div>
            <Table border :columns="ad_columns" :data="ad_data"></Table>
            <div style="margin: 10px;overflow: hidden">
                <div style="float: right; height:35px;">
                    <Page :total="total_count" :page-size="pre_page" :current="page" @on-change="page_change">
                    </Page>
                </div>
            </div>
        </Card>
    </div>
</template>

<script>
    import {get_local_user_proxy} from '@/utils/config_common.js';

    export default {
        name: 'adlist',
        data () {
            return {
                total_count: 0,
                page: 1,
                pre_page: 10,
                ad_columns: [
                    {
                        title: '广告名称',
                        key: 'ad_name',
                        align: 'center'
                    },
                    {
                        title: '所属分类',
                        key: 'category_id',
                        align: 'center',
                        render: (h, params) => {
                            return h('div', {}, this.tmpObj[params.row.category_id]);
                        }
                    },
                    {
                        title: '更新时间',
                        align: 'center',
                        render: (h, params) => {
                            let time = params.row.update_at || params.row.create_at;
                            return h('div', {}, `${time.split('T')[0]}`);
                        }
                    },
                    {
                        title: '操作',
                        key: 'name',
                        align: 'center',
                        render: (h, params) => {
                            return h('div', [
                                h(
                                    'Button',
                                    {
                                        props: {type: 'primary'},
                                        style: {marginRight: '10px', display: 'inline'},
                                        on: {
                                            click: () => {
                                                this.$router.push({
                                                    path: '/ad/set_ad/' + params.row.id
                                                });
                                            }
                                        }
                                    },
                                    '编辑'
                                ),
                                h(
                                    'Button',
                                    {
                                        props: {type: 'primary'},
                                        style: {marginRight: '10px', display: 'inline'},
                                        on: {
                                            click: () => {
                                                this.$router.push({
                                                    path: '/ad/detail/' + params.row.id
                                                });
                                            }
                                        }
                                    },
                                    '详情'
                                ),
                                h(
                                    'Button',
                                    {
                                        props: {type: 'error'},
                                        style: {display: 'inline'},
                                        on: {
                                            click: () => {
                                                this.$Modal.confirm({
                                                    title: '提示',
                                                    content: '确定要删除该广告？',
                                                    onOk: () => {
                                                        this.delData(params.row.id);
                                                    }
                                                });
                                            }
                                        }
                                    },
                                    '删除'
                                )
                            ]);
                        }
                    }
                ],
                ad_data: [],
                ad_type: '',
                ad_options: [],
                tmpObj: {},
                ad_name: '',
                ad_region: [],
                regionData: []
            };
        },
        created () {
            this.getAdData();
            this.getAdType();
            this.get_region_list();
        },
        activated () {
            this.getAdData();
            this.getAdType();
            this.get_region_list();
        },
        methods: {
            //删除广告
            delData (id) {
                let opts = {
                    url: `${this.$hostUrl.nodehost}${this.$configApi.ad_delete.url}/${id}`,
                    method: this.$configApi.ad_delete.method
                };
                this.$Loading.start();
                this.$axios({
                    method: opts.method,
                    url: opts.url
                })
                    .then(res => {
                        this.$Loading.finish();
                        res = res.data;
                        if (res.code == 200) {
                            this.$Message.success('删除成功');
                            this.getAdData();
                        } else {
                            this.$Message.error(res.msg);
                        }
                    });
            },
            // 获取区域信息
            get_region_list () {
                let opts = {
                    url: `${this.$hostUrl.cloud_host_v2}${this.$configApi.region_list.url}`,
                    method: this.$configApi.region_list.method
                };
                let params = {};
                this.$axios({
                    method: opts.method,
                    url: opts.url,
                    params: params
                }).then(res => {
                    let tmpres = res.data;
                    if (tmpres.status == 200) {
                        this.regionData = tmpres.result;
                    } else {
                        this.regionData = [];
                    }
                });
            },
            // 获取广告分类信息
            getAdType () {
                let opts = {
                    url: `${this.$hostUrl.nodehost}${this.$configApi.ad_type.url}`,
                    method: this.$configApi.ad_type.method
                };

                this.$axios({
                    method: opts.method,
                    url: opts.url,
                    data: {}
                }).then(res => {
                    res = res.data;
                    if (res.code == 200) {
                        this.ad_options = res.data;
                        let tmp = {};
                        res.data.forEach(item => {
                            tmp[item.id] = item.ad_name;
                        });
                        this.tmpObj = tmp;
                    } else {
                        this.ad_options = [];
                        this.tmpObj = {};
                    }
                });
            },
            // 获取广告列表信息
            getAdData () {
                let opts = {
                    url: `${this.$hostUrl.nodehost}${this.$configApi.ad_list.url}`,
                    method: this.$configApi.ad_list.method
                };
                let params = {
                    page: this.page,
                    pre_page: this.pre_page,
                    ad_name: this.ad_name,
                    category_id: this.ad_type,
                    province_id: (this.ad_region.length == 1) ? this.ad_region[0] : '',
                    city_id: (this.ad_region.length == 2) ? this.ad_region[1] : '',
                    district_id: (this.ad_region.length == 3) ? this.ad_region[2] : '',
                    proxy_id: get_local_user_proxy()
                };
                this.$axios({
                    method: opts.method,
                    url: opts.url,
                    data: params
                }).then(res => {
                    res = res.data;
                    if (res.code == 200) {
                        this.ad_data = res.data.result;
                        this.total_count = res.data.count;
                    } else {
                        this.ad_data = [];
                        this.total_count = 0;
                        this.$Message.error(res.message);
                    }
                });

            },
            // 改变页数
            page_change (val) {
                this.page = val;
                this.getAdData();
            }
        }
    };
</script>

